<template>
	<view class="container">
		<scroll-view class="scroll_y" scroll-y="true" @scrolltolower="scroll">
			<view class="box_item" @tap="ticket_book_now(item)" v-for="item in list" :key="item.id">
				<view class="top">
					<view class="left">
						<u-image :src="baseImage(item.image)" :lazy-load="true"></u-image>
					</view>
					<view class="right">
						<view class="box_name">
							<text class="name">{{item.name}}</text>
							<view class="box_status">{{roomStatusText(item.room_status)}}</view>
						</view>
						<view class="label_list">
							<view class="label_item" v-for="labItem in label(item.label_ids)" :key="labItem.id">
								{{labItem.title}}
							</view>
						</view>
					</view>
				</view>

				<view class="can_book_time">
					<text>已預訂時段</text>
					<text>可預訂時段</text>
				</view>

				<!-- <view class="book_state box">
					<view style="display: flex;">
						<view v-for="(Numitem,index) in num_time_stamp" :key="index"
							:style="{width:100/num_time.length + '%' }"
							style="border: 1rpx solid #707070;height: 30rpx;">
							<view class="bs_deep" v-for="(deepItem,dindex) in changeTime(item.times)" :key="dindex">
								<view v-if="Numitem>=deepItem.start && Numitem<=deepItem.end" class="deep"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<view :style="{width:100/num_time.length + '%' }" v-for="(item,index) in num_time" :key="index">
							<text>{{cut(item,'hour')}}</text>
						</view>
					</view>
				</view> -->

				<view class="book_state box">
					<view style="display: flex;">
						<view class="bs" style="height: 30rpx;" v-for="(timeBarItem,timebarIndex) in timeBar"
							:key="timebarIndex" :style="{width:100/timeBar.length + '%' }">
							<view class="bs_deep" v-for="(orderTimeItem,orderIndex) in orderTimelot(item.times)"
								:key="orderIndex">
								<view class="deep" :style="{width:setWidth(timeBarItem,orderTimeItem) + '%'}"
									v-if="timeBarItem>=orderTimeItem.start && timeBarItem<=orderTimeItem.end"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<view :style="{width:100/timeBarText.length + '%' }" v-for="(item,index) in timeBarText"
							:key="index">
							<text>{{item==0?'次日':item}}</text>
						</view>
					</view>
				</view>

				<view class="book_now">立即預訂</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getUseTicketRollRoomList,
		getStoreInfo
	} from '@/api/me.js'
	import {
		getLabelList
	} from '@/api/index.js'

	import baseURL from '@/utils/baseURL.js'
	import store from '@/store/index.js'

	export default {
		data() {
			return {
				flag: true,
				num_time: [],
				num_time_stamp: [],
				timeStampList: [],
				colorDeep: [],
				colorDeepStamp: [],
				store_config: '', // 門店配置
				list: [],
				labelList: [],
				storeInfo: '', // 店鋪詳情
				storeConfig: null, // 店鋪配置
				ticketRollId: '', // 電子票券id
				ticketRollInfo: '', // 電子票券詳情

				// 时间展示条
				timeBar: [], // 存放当前时间之后的24小时
				timeBarText: [], // 存放时间文本
			};
		},
		methods: {
			scroll() {},
			ticket_book_now(item) {
				this.$store.commit('updateRoomInfo', item)
				uni.navigateTo({
					// url: `/pages/electronic_ticket_roll/ticket_roll_select_box/ticket_book_now/ticket_book_now?details=${JSON.stringify(item)}&id=${this.ticketRollId}&ticketRollInfo=${JSON.stringify(this.ticketRollInfo)}`
					url: `/pages/electronic_ticket_roll/ticket_roll_select_box/ticket_book_now/ticket_book_now`
				})
			},
			baseImage(url) {
				return baseURL + url
			},
			roomStatusText(status) {
				switch (status) {
					case 0:
						return '空閒';
					case 1:
						return '預訂';
					case 2:
						return '待打掃';
					case 3:
						return '打掃中';
					case 4:
						return '故障';
				}
			},
			label(ids) {
				let arrId = ids.split(',').map(item => Number(item))
				let arr = this.labelList.filter(item => {
					if (arrId.indexOf(item.id) !== -1) {
						return item
					}
				})
				// console.log(arr, "arr")
				return arr
			},
			// 設置開店總時長
			reservation_time(open, close) {
				// console.log(open,close,'111111111111')
				// 開店時間
				let start = this.timeStamp(open, 'hour')
				// 關店時間
				let end = this.timeStamp(close, 'hour')
				if (end <= start) {
					end = end + 24 * 60 * 60 * 1000
				}

				if (this.storeConfig) {
					// 根據店鋪配置的時間表間隔設置長度
					// 時間表間隔的時間戳
					let stamp = this.timeStamp(this.storeConfig.schedule_interval, 'hour')
					// 終止預約時間（即關店前幾小時不允許預約訂單）
					let orderEnd = this.timeStamp(this.storeConfig.order_end_time, 'hour')

					stamp = stamp ? stamp : 60 * 60 * 1000
					// console.log(stamp,'時間表間隔')

					let arr = []
					for (var i = start; i <= end - orderEnd; i += stamp) {
						if ((i / 60 / 60 / 1000) >= 24) {
							arr.push(i - (24 * 60 * 60 * 1000) ? i - (24 * 60 * 60 * 1000) : 24 * 60 * 60 * 1000)
						} else {
							arr.push(i)
						}
					}
					this.num_time_stamp = [...arr]
					// console.log(this.num_time_stamp,'1111111111111111')

					let arrTime = []
					arr.forEach(item => {
						let h = this.montage(this.stampTime(item, 'hour'))
						let m = this.montage(this.stampTime(item, 'minute'))
						arrTime.push(h + ':' + m)
					})
					// console.log(arrTime, 'arrTime')
					this.num_time = [...arrTime]
				} else {
					let arr = []
					for (var i = start; i <= end; i += 60 * 60 * 1000) {
						arr.push(i)
					}
					this.num_time_stamp = [...arr]
					let arrTime = []
					arr.forEach(item => {
						let h = this.montage(this.stampTime(item, 'hour'))
						let m = this.montage(this.stampTime(item, 'minute'))
						arrTime.push(h + ':' + m)
					})
					// console.log(arrTime, 'arrTime')
					this.num_time = [...arrTime]
				}

			},
			// 將時間轉換成時間戳
			timeStamp(str, type) {
				if (!str) return 0
				if (type == 'hour') {
					return Number(str.split(':')[0]) * 60 * 60 * 1000 + Number(str.split(':')[1]) * 60 * 1000
				}
			},
			// 將時間戳轉換成時間
			stampTime(num, type) {
				if (type === 'hour') {
					return Math.floor(num / 60 / 60 / 1000)
				} else if (type == 'minute') {
					return Math.floor((num % (60 * 60 * 1000)) / (60 * 1000))
				}
			},
			montage(num) {
				return num >= 10 ? num : '0' + num
			},
			cut(time, type) {
				if (time.indexOf(':') !== -1) {
					if (type == 'hour') {
						return time.split(':')[0]
					} else if (type == 'minute') {
						return time.split(':')[1]
					}
				} else {
					if (type == 'hour') {
						return time
					} else if (type == 'minute') {
						return ''
					}
				}
			},
			changeTime(times) {
				let arr = []
				times.forEach(item => {
					let startH = new Date(item.start * 1000).getHours() * 60 * 60 * 1000
					let startM = new Date(item.start * 1000).getMinutes() * 60 * 1000
					let endH = new Date(item.end * 1000).getHours() * 60 * 60 * 1000
					let endM = new Date(item.end * 1000).getMinutes() * 60 * 1000
					arr.push({
						start: startH + startM,
						end: endH + endM
					})
				})
				return arr
			},

			// 时间条
			setTimeBar() {
				// 获取当前时间的时间戳
				let now = new Date().getTime()
				let end = now + 3600000 * 24
				for (var i = now; i <= end; i += 1800000) {
					this.timeBar.push(i)
				}
				for (var j = now; j <= end; j += 3600000) {
					this.timeBarText.push(this.setTimeHours(j))
				}
			},
			setTimeHours(num) {
				return new Date(num).getHours()
			},
			orderTimelot(arr) {
				if (!arr.length) return []
				let a = []
				arr.forEach(item => {
					a.push({
						start: item.start * 1000,
						end: item.end * 1000
					})
				})
				return a
			},
			setWidth(time, item) {
				return item.end / time * 100
				// console.log(item.end / time)
				// return 100
			},

		},
		onLoad(option) {
			// this.ticketRollId = option.id
			// this.ticketRollInfo = JSON.parse(option.ticketRollInfo)
			this.ticketRollInfo = store.state.ticketInfo

			getUseTicketRollRoomList({
				// user_coupon_id: option.id,
				user_coupon_id: this.ticketRollInfo.id,
			}).then(res => {
				// console.log(res.data, '11111111111')
				this.list = res.data
			})

			// 獲取標籤列表
			getLabelList().then(res => {
				// console.log(res.data, '標籤列表')
				this.labelList = res.data
			})

			// 獲取店鋪詳情
			getStoreInfo({
				// store_id: option.store_id
				store_id: this.ticketRollInfo.store_id
			}).then(res => {
				this.storeInfo = res.data
				this.storeConfig = res.data.store_config

				this.reservation_time(this.storeInfo.open, this.storeInfo.close)
			})

			this.setTimeBar()
		}
	}
</script>

<style lang="less">
	.container {
		min-height: calc(100vh - 90rpx);
		background-color: #F3F5F9;
		padding: 30rpx;
		box-sizing: border-box;

		.scroll_y {
			// background-color: skyblue;
			height: 90vh;

			.box_item {
				width: 690rpx;
				// min-height: 479rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				position: relative;
				margin-bottom: 30rpx;
				padding-bottom: 100rpx;

				.top {
					width: 100%;
					display: flex;
					margin-bottom: 42rpx;

					.left {
						width: 302rpx;
						height: 199rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						overflow: hidden;
						margin-right: 19rpx;

						/deep/ .u-image__image {
							width: 302rpx !important;
							height: 199rpx !important;
						}

						/deep/ .u-image__error {
							width: 302rpx !important;
							height: 199rpx !important;
						}

						/deep/ .u-image__loading {
							width: 302rpx !important;
							height: 199rpx !important;
						}
					}

					.right {
						flex: 1;

						.box_name {
							font-size: 30rpx;
							color: #000;
							font-weight: bold;
							display: flex;
							align-items: center;
							margin-top: 12rpx;
							margin-bottom: 22rpx;

							.box_status {
								font-size: 24rpx;
								color: #FFFFFF;
								width: 117rpx;
								height: 46rpx;
								background: #39B19D;
								border-radius: 16rpx 16rpx 16rpx 16rpx;
								opacity: 1;
								text-align: center;
								line-height: 46rpx;
								margin-left: 59rpx;
							}
						}

						.label_list {
							display: flex;
							flex-wrap: wrap;

							.label_item {
								height: 33rpx;
								line-height: 33rpx;
								padding: 0 15rpx;
								border-radius: 16rpx;
								border: 1rpx solid #39B19D;
								text-align: center;
								color: #39B19D;
								font-size: 28rpx;
								margin-right: 25rpx;
								margin-bottom: 19rpx;
							}
						}

					}
				}

				.can_book_time {
					display: flex;
					justify-content: space-around;
					margin-bottom: 29rpx;

					text {
						font-size: 24rpx;
						// margin-left: 7rpx;
						display: flex;
						align-items: center;

						&::before {
							content: "";
							display: inline-block;
							width: 30rpx;
							height: 30rpx;
							background: #39B19D;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							opacity: 1;
							border: 1rpx solid #707070;
							margin-right: 7rpx;
						}

						&:last-child::before {
							background-color: #fff;
						}
					}
				}

				.book_state {
					padding: 0 11rpx;

					.bs {
						border: 1rpx solid #707070;
						border-right: none;
						position: relative;

						&:last-child {
							border-right: 1rpx solid #707070;
						}

						&:nth-child(2n) {
							border-left: none;

							&::before {
								content: '';
								width: 1rpx;
								height: 50%;
								display: block;
								position: absolute;
								background-color: #FA533D;
								left: 0%;
								bottom: 0%;
								z-index: 2;
							}
						}

						.bs_deep {
							position: relative;
						}

						.deep {
							background: #39B19D;
							height: 30rpx;
							// width: 30rpx;
							width: 100%;
							position: absolute;
							z-index: 1;
						}
					}

					.item {
						display: flex;
						font-size: 17rpx;
						// text-align: center;

						view {
							display: flex;
							justify-content: center;
							flex-direction: column;
						}
					}
				}

				.book_now {
					width: 117rpx;
					height: 46rpx;
					background: #39B19D;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					text-align: center;
					line-height: 46rpx;
					color: #fff;
					font-size: 24rpx;
					position: absolute;
					right: 10rpx;
					bottom: 29rpx;
				}
			}
		}
	}
</style>